<script setup>
import Header from '@/components/detail_header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <div class="details">
    <Header></Header>
    <Breadcrumb></Breadcrumb>
    <h1 class="page-title">创新服务门户</h1>
    <div class="section">
      <h2 class="section-title">信息展示</h2>
      <div class="info-grid">
        <div class="info-card">
          <img src="https://via.placeholder.com/400x300?text=动态资讯" alt="动态资讯">
          <div class="info-card-content">
            <h3>动态资讯</h3>
            <p>了解最新的行业动态和平台新闻，掌握第一手资讯。</p>
            <a href="javascript:;">查看更多 →</a>
          </div>
        </div>

        <div class="info-card">
          <img src="https://via.placeholder.com/400x300?text=基地风采" alt="基地风采">
          <div class="info-card-content">
            <h3>基地风采</h3>
            <p>展示创新基地的优美环境和先进设施，感受创新氛围。</p>
            <a href="javascript:;">查看更多 →</a>
          </div>
        </div>

        <div class="info-card">
          <img src="https://via.placeholder.com/400x300?text=媒体报道" alt="媒体报道">
          <div class="info-card-content">
            <h3>媒体报道</h3>
            <p>汇集各大媒体对平台和入驻企业的报道和评价。</p>
            <a href="javascript:;">查看更多 →</a>
          </div>
        </div>

        <div class="info-card">
          <img src="https://via.placeholder.com/400x300?text=领导关怀" alt="领导关怀">
          <div class="info-card-content">
            <h3>领导关怀</h3>
            <p>记录各级领导视察指导的珍贵瞬间和重要指示。</p>
            <a href="javascript:;">查看更多 →</a>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <h2 class="section-title">应用展示</h2>
      <div class="app-grid">
        <!-- 中枢系统 -->
        <div class="app-card">
          <div class="app-icon">🧠</div>
          <h3>智算中心</h3>
          <p>提供强大的计算能力和算法支持，助力企业创新发展。</p>
          <a href="javascript:;">进入系统</a>
        </div>

        <div class="app-card">
          <div class="app-icon">📚</div>
          <h3>知识中枢</h3>
          <p>汇集行业知识库和专家资源，一站式知识服务平台。</p>
          <a href="javascript:;">进入系统</a>
        </div>

        <div class="app-card">
          <div class="app-icon">🤖</div>
          <h3>模型中枢</h3>
          <p>各类AI模型和算法库，支持快速开发和部署。</p>
          <a href="javascript:;">进入系统</a>
        </div>

        <div class="app-card">
          <div class="app-icon">🖥️</div>
          <h3>场景应用中心</h3>
          <p>针对不同行业场景的应用解决方案展示和体验。</p>
          <a href="javascript:;">进入系统</a>
        </div>

        <!-- 服务系统 -->
        <div class="app-card">
          <div class="app-icon">🚀</div>
          <h3>双创公共服务系统</h3>
          <p>为创新创业企业提供全方位的服务和支持。</p>
          <a href="javascript:;">进入系统</a>
        </div>

        <div class="app-card">
          <div class="app-icon">🛒</div>
          <h3>电商服务系统</h3>
          <p>专业的电商平台服务，助力企业拓展线上市场。</p>
          <a href="javascript:;">进入系统</a>
        </div>

        <div class="app-card">
          <div class="app-icon">🎤</div>
          <h3>会务活动服务系统</h3>
          <p>提供会议活动策划、报名、直播等一站式服务。</p>
          <a href="javascript:;">进入系统</a>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #1e5799;
}
.section {
  background-color: white;
  border-radius: 5px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 22px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
  color: #1e5799;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.info-card {
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.info-card-content {
  padding: 15px;
}

.info-card h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.info-card p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.info-card a {
  display: inline-block;
  color: #1e5799;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.app-card {
  background-color: #f9f9f9;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.app-icon {
  font-size: 40px;
  color: #1e5799;
  margin-bottom: 15px;
}

.app-card h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.app-card p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.app-card a {
  display: inline-block;
  background-color: #1e5799;
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.app-card a:hover {
  background-color: #207cca;
}
</style>